<template>
  <div class="c-warp">
    <div class="c-tab">
      <router-link :to="item.menuUrl" v-for="item in secondMenu" v-if="item.have" :class="[index === item.id ? 'active' : '']"
        :key="item.id" @click.native="chosen(item.id)">{{item.label}}
      </router-link>
    </div>
    <!--<el-tabs type="border-card">-->
    <!--<el-tab-pane v-for="item in secondMenu" :key="item.id" :name="item.id" :label="item.fname"-->
    <!--@tab-click="changePage">-->
    <!--</el-tab-pane>-->
    <!--</el-tabs>-->
    <router-view :style="{height: client.height-165 + 'px'}" />
  </div>
</template>

<script>
  import {
    mapState
  } from 'vuex';
  export default {
    computed: {
      ...mapState({
        client: state => state.client,
        userRole: state => state.userRole,
      }),
    },
    data() {
      return {
        secondMenu: [],
        index: ''
      }
    },
    methods: {
      init() {
        for (let i of this.userRole.menuPermissionList) {
          if (i.id === 45) {
            if (i.children && i.children.length > 0) {
              for (let j of i.children) {
                this.secondMenu.push(j);
              }
            }
          }
        }
        if (sessionStorage.getItem('SYSTEMACTIVEINDEX')) {
          this.index = parseInt(sessionStorage.getItem('SYSTEMACTIVEINDEX'));
        } else {
          for (let i of this.secondMenu) {
            console.log(i)
            if (i.have) {
              this.index = i.id;
              return;
            }
          }
        }
      },
      chosen(val) {
        sessionStorage.setItem('SYSTEMACTIVEINDEX', val);
        this.index = val;
      }
    },
    watch: {
      index(newval, oldval) {
        setTimeout(() => {
          for (let i of this.secondMenu) {
            if (i.id === newval) {
              console.log(i.id)
              console.log(i.menuUrl)
              this.$router.push(i.menuUrl);
            }
          }
        }, 100)
      }
    },
    mounted() {
      this.init();
    }
  }

</script>

<style scoped>
  .c-tab {
    width: 500px;
    margin-bottom: 10px;
  }

  .subPage {
    margin-top: 10px;
    width: 100%;
    background-color: transparent;
  }

</style>

